<template>
  <t-transfer
    v-model="targetValue"   
    v-model:checked="checkedRef"    
    :data="items"   
    @change="onChange"      
    @checked-change="handleCheckedChange"  
  >
    <template #tree="slotProps" >  
      <t-tree @active="onActive"  v-bind="slotProps" checkable hover expand-all transition :draggable="true"  ref="tree">
          <template #label="{ node }">   
            <t-icon name="star"></t-icon>
               <span>{{node.label}}</span>    
           </template>  
           <template #operations="{ node }">   
               <t-button  size="small" variant="base" @click="append(node)"> 添加子节点 </t-button>
        <t-button  size="small" variant="outline" @click="insertAfter(node)">
          后插节点
        </t-button>
        <t-button  size="small" variant="outline" @click="setData(node)">
          修改节点label
        </t-button>
               <button @click="remove(node)">删除</button>
           </template>
      </t-tree>
    </template>
  </t-transfer> 
</template>
<script setup lang="ts"> 
import { ref } from 'vue'; 
const tree = ref(null);
const items = [ 
  {
    value: '1',
    label: '1',
    children: [
      {
        value: '1.1',
        label: '1.1',
      },
      { 
        value: '1.2',
        label: '1.2',
        children: [ 
          { 
            value: '1.2.1',
            label: '1.2.1',
            children: [ 
              { 
                value: '1.2.1.1',
                label: '1.2.1.1',
              },
              {
                value: '1.2.1.2',
                label: '1.2.1.2',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: '2',
    children: [
      {
        value: '2.1',
        label: '2.1',
      }, 
      { 
        value: '2.2',
        label: '2.2', 
      },
    ],
  },
  { 
    value: '3',
    label: '3',
    children: [], 
  },
];  
const targetValue = ref([]);    
const checkedRef = ref([]);    
const checkedIds = ref([]);   
const useActived = ref(false); 
const activeIds=ref([])  
const activeId=ref('')
const index = ref(2);

const handleCheckedChange = ({ checked, sourceChecked, targetChecked, type }) => {
  checkedRef.value = checked;
  console.log('handleCheckedChange', {
    checked,
    sourceChecked,
    targetChecked,
    type, 
  });
}; 
const onActive = (vals, state) => {//激活
  console.info('on active:', vals, state);
  activeIds.value = vals; 
  activeId.value = vals[0] || '';
};

const onChange = (newTargetValue) => {
  console.log('onChange', newTargetValue); 
};
const insertAfter = (node) => {  
  const item = getInsertItem();
  if (item) { 
    tree.value.insertAfter(node.value, item);
    setLabel(item.value);
  } 
};
const setLabel = (value) => { 
  const node = tree.value.getItem(value);
  const label = getLabelContent(node);
  const { data } = node; 
  data.label = label;
}; 
const getLabelContent = (node) => {
    // console.log(node.getPath())  
  const pathNodes = node.getPath();
  let label = pathNodes.map((itemNode) => itemNode.getIndex() + 1).join('.');
  label = `${label} | value: ${node.value}`;
  return label;
};
const remove = (node) => {
    //删除节点
  tree.value.remove(node.value); 
};
const getActivedNode = () => {
  const activeNode = tree.value.getItem(activeId.value);
  return activeNode;
};
const getInsertItem = () => {
  let item = null;
  if (useActived.value) {
    item = getActivedNode();
  } else {
    index.value += 1;
    const value = `t${index.value}`;
    item = { 
      value,
      label:'随机lable'+Math.random().toFixed(2)
    };
  }
  return item;
};
const append = (node) => {
    //追加子节点
  const item = getInsertItem();
  if (item) {
    if (!node) {
      tree.value.appendTo('', item);
    } else {
      tree.value.appendTo(node.value, item);
    }
    setLabel(item.value);
  }
};
const setData = (node) => {
  node.setData({ label: '随机lable'+Math.random().toFixed(2) });
};
</script>


<style lang="less" scoped>

</style>